import React, { Component } from 'react';

import '../styles/all/AllCommodities.scss'
import { SearchOutlined } from '@ant-design/icons';
import { index_goodlist } from '../api/index';

import TopBox from '../components/TopBox';

class AllCommodities extends Component {
    constructor(props) {
        super(props);
        //初始化组件状态(数据)
        this.state = {
            obj: { title: 'vue react' },
            list: [
                { text: '综合' }, { text: '销量' }, { text: '新品' }, { text: '价格' }, { text: '筛选' },
            ],
            goodList: []
        }
    }
    componentDidMount() {
        console.log('componentDidMount');
        //一般在这个方法中 发送ajax请求, 创建定时器, 监听事件
        index_goodlist().then((res) => {
            console.log(res.data);
            this.setState({ bannerlist: res.data.list });
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.goodList = res.data.list
        })
    }
    toDetail(id) {
        this.props.history.push('/details/' + id);
    }
    toSearch() {
        this.props.history.push('/search');
    }
    render() {
        return (
            <div className='AllCommodities'>
                {/* 全部商品 */}
                {<TopBox />}
                <div className='allSearch' onClick={() => { this.toSearch() }}>
                    <SearchOutlined style={{ color: '#999999', fontSize: '20px' }} />
                    <input type="text" placeholder='搜索店铺内商品' />
                </div>
                <div className='allSort'>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className='allSort_item' key={index}>{item.text}</div>
                            )
                        })
                    }
                    {
                        //如果列表为空
                        this.state.list.length === 0 &&
                        <div className="empty">网络异常,请尝试刷新页面!</div>
                    }
                </div>
                <div className='allSortList'>
                    {
                        this.state.goodList.map((item, index) => {
                            return (
                                <div className='allSortList_item' key={index} onClick={() => { this.toDetail(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <div className='allSortList_itemBox'>
                                        <div className='allSortList_itemBox_name'><span>{item.brand}</span>{item.name}</div>
                                        <div className='allSortList_itemBox_priceBox'>{item.salesPrice.name}￥<span className='allSortList_itemBox_newPrice'>{item.salesPrice.value}</span></div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    {
                        //如果列表为空
                        this.state.list.length === 0 &&
                        <div className="empty">网络异常,请尝试刷新页面!</div>
                    }
                </div>
            </div>
        );
    }
}

export default AllCommodities;